<!--
 * @Author: huCheng Li
 * @Date: 2023-10-23 20:16:45
 * @description: 
 * @LastEditTime: 2023-10-25 11:17:31
 * @FilePath: \三阶段\pilipili\pili-pili-app\src\pages\search\index.vue
-->

<template>
  <div class="search-box">
    <div class="search">
      <span>
        <van-icon name="arrow-left" @click="$router.go(-1)" /></span>
      <van-search show-action shape="round" placeholder="请输入搜索关键词">
        <template #action>
          <div>搜索</div>
        </template>
      </van-search>

      <div class="hot">
        <span class="left">pilipili热搜</span>
        <span class="right">完整榜单<van-icon name="arrow" /></span>
        <ul>
          <li>沙特宣布启动电竞世界杯<span>热</span></li>
          <li>五条悟新封面颜值崩盘<span>热</span></li>
          <li>kt可能参加了LPL LCK...<span class="g">梗</span></li>
          <li>成都被咬女童已转出...<span>热</span></li>
          <li>任天堂上架135元购物车<span>热</span></li>
          <li>WBG世界赛风波<span class="g">梗</span></li>
          <li>WWE猛男摔跤<span class="g"><van-icon name="bar-chart-o" />直播中</span></li>
          <li>涉鼠头事件两地政府被约谈</li>
          <li>野狼被游客投喂胖成网红</li>
          <li>iPhone15全系价格跳水</li>
        </ul>
      </div>
      <div class="find">
        <span class="left">搜索发现</span>
        <span class="right"><i><van-icon name="replay" /></i>|<i class="eye"><van-icon name="closed-eye" /></i></span>
        <ul>
          <li>水神芙宁娜</li>
          <li>芙宁娜纳维莱特</li>
          <li>害羞8.<i>12小时前更新</i></li>
          <li>矮乐多.<i>12小时前更新</i></li>
          <li>芙卡洛斯</li>
          <li>芙宁娜强度</li>
          <li>水神</li>
          <li>芙宁娜</li>
          <li>芙宁娜武器</li>
          <li>水神强度</li>
          <li>九龄身高</li>
          <li>莱欧斯利
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";

const router = useRouter();
console.log(router);

</script>
<style lang="less" scoped>
@import "../../style/common.less";

.search-box {
  background-color: white;
  padding: 0px 5px;
  font-size: 14px;
  .rel();

  .search {
    margin: 10px 5px;


    >span {
      position: absolute;
      top: 28px;
      padding: 0px 10px;
    }

    .left {
      font-weight: 600;
      margin: 5px 10px;
      display: inline-block;
      font-size: 14px;
    }

    .right {
      float: right;
      color: darkgray;
      font-size: 12px;
      /* height: 14px; */
      /* line-height: 25px; */
      padding-top: 7px;
    }

    ::v-deep .van-search__content {
      margin-left: 25px;
    }
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    margin: 10px;

    li {
      width: 50%;
      margin-bottom: 10px;

      .g {
        background-color: darkorchid;
      }

      span {
        background-color: red;
        color: white;
        font-size: 10px;
        padding: 2px;
        margin-left: 5px;
      }
    }
  }

  .find {
    .right {
      i {
        padding: 0px 6px;

      }

      .eye {
        padding-right: 0;
      }
    }

    li {
      background-color: #f5f5f5;
      padding: 2px 4px;
      margin-right: 10px;
      width: 47%;

      i {
        font-style: normal;
        color: darkgray;
      }
    }
  }
}
</style>